<template>
  <div class="reply-table">
    <!-- 顶部搜索栏 -->
    <el-row class="search-bar" style="margin-bottom: 20px; background-color: #fff; padding: 15px;">
      <el-col :span="24">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="回复内容">
            <el-input style="width: 170px;" v-model="searchForm.content" placeholder="请输入回复内容"></el-input>
          </el-form-item>
          <el-form-item label="站点" v-if="!currentUser.siteId">
            <el-select v-model="searchForm.siteId" placeholder="请选择站点" style="width: 170px;">
              <el-option
                v-for="item in siteList"
                :key="item.id"
                :label="item.siteName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="起始时间">
            <el-date-picker
              v-model="searchForm.startTime"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 170px;"
              :picker-options="{
                disabledDate: time => {
                  return time.getTime() > new Date().setHours(23, 59, 59, 999);
                }
              }"  
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="searchForm.endTime"
              type="datetime"
              placeholder="选择日期时间" 
              style="width: 170px;"
              :picker-options="{
                disabledDate: time => {
                  return time.getTime() > new Date().setHours(23, 59, 59, 999);
                }
              }"
              default-time="23:59:59" 
            >
            </el-date-picker>
          </el-form-item> -->
          
          <!-- <el-form-item>
            <el-button type="primary" @click="searchReplies">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button 
              type="danger" 
              :disabled="selectedReplies.length === 0"
              @click="batchDelete"
              v-if="currentUser.role !== 3"
            >
              批量删除
            </el-button>
          </el-form-item> -->
        </el-form>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table
      :data="replyList.records"
      style="width: 100%"
      :border="true"
      stripe
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选框列 -->
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <!-- 回复内容 -->
      <el-table-column prop="content" label="回复内容" min-width="200">
        <template #default="scope">
          <span class="ellipsis">{{ scope.row.content }}</span>
        </template>
      </el-table-column>

      <!-- 用户信息 -->
      <el-table-column label="用户信息" width="200">
        <template #default="scope">
          <div class="user-info">
            <template v-if="scope.row.userId">
              <el-avatar :size="30" :src="scope.row.userHeadPath"></el-avatar>
              <span style="margin-left: 10px;">{{ scope.row.userNickName }}</span>
            </template>
            <template v-else>
              <span style="color: #909399;">暂无信息</span>
            </template>
          </div>
        </template>
      </el-table-column>

      <!-- 负责人信息 -->
      <el-table-column label="负责人信息" width="200">
        <template #default="scope">
          <div class="director-info">
            <template v-if="scope.row.directorId">
              <el-avatar :size="30" :src="scope.row.directorHeadPath"></el-avatar>
              <span style="margin-left: 10px;">{{ scope.row.directorName }}</span>
            </template>
            <template v-else>
              <span style="color: #909399;">暂无信息</span>
            </template>
          </div>
        </template>
      </el-table-column>

      <!-- 站点信息 -->
      <el-table-column label="站点信息" width="200">
        <template #default="scope">
          <div class="site-info">
            <span>{{ scope.row.siteName }}</span>
          </div>
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column prop="creatTime" label="创建时间" width="180"></el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button 
            type="primary" 
            class="operation-button" 
            icon="el-icon-chat-dot-round" 
            size="small" 
            @click="showAddCommentDialog(scope.row)" 
            circle
          ></el-button>
          <el-button 
            type="danger" 
            class="operation-button" 
            icon="el-icon-delete" 
            size="small" 
            @click="deleteReply(scope.row)" 
            circle
            v-if="currentUser.role !== 3"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container" style="margin-top: 20px; text-align: center;">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="replyList.total"
        :current-page="replyList.current"
        :page-size="replyList.size"
        :page-sizes="[3, 4, 5]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <!-- 添加回复对话框 -->
    <el-dialog title="添加回复" :visible.sync="addReplyDialogVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="newReply" label-width="100px" :rules="rules" ref="newReplyForm">
        <el-form-item label="回复内容" prop="content">
          <el-input style="width: 570px;" type="textarea" v-model="newReply.content" placeholder="请输入回复内容" rows="4"></el-input>
        </el-form-item>
        <el-form-item label="站点" prop="siteId" v-if="!currentUser.siteId">
          <el-select v-model="newReply.siteId" placeholder="请选择站点" style="width: 570px;">
            <el-option
              v-for="item in siteList"
              :key="item.id"
              :label="item.siteName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addReplyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="showConfirmDialog">确定</el-button>
      </span>
    </el-dialog>

    <!-- 确认添加回复对话框 -->
    <el-dialog
      title="确认添加回复"
      :visible.sync="confirmDialogVisible"
      width="40%"
      center
      :close-on-click-modal="false"
    >
      <div class="confirm-content">
        <p><strong>回复内容：</strong>{{ newReply.content }}</p>
        <p><strong>站点：</strong>{{ getSiteName(newReply.siteId) }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addReply">确定</el-button>
      </span>
    </el-dialog>

    <!-- 添加评论对话框 -->
    <el-dialog title="添加评论" :visible.sync="addCommentDialogVisible" width="50%" :close-on-click-modal="false">
      <div class="comment-info">
        <div class="header-info">
          <div class="user-info">
            <template v-if="currentReply.userId">
              <el-avatar :size="40" :src="currentReply.userHeadPath"></el-avatar>
              <div class="user-detail">
                <span class="user-name">{{ currentReply.userNickName }}</span>
                <span class="reply-time">{{ currentReply.creatTime }}</span>
              </div>
            </template>
          </div>
          <div class="site-info">
            <i class="el-icon-location"></i>
            <span>{{ currentReply.siteName }}</span>
          </div>
        </div>
        <div class="reply-content">
          {{ currentReply.content }}
        </div>
        <div class="comment-history">
          <el-button 
            type="text" 
            icon="el-icon-time" 
            @click="showCommentHistory"
          >
            查看评论历史
          </el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <el-form :model="newComment" label-width="100px" :rules="commentRules" ref="newCommentForm">
        <el-form-item label="评论内容" prop="content">
          <el-input style="width: 570px;" type="textarea" v-model="newComment.content" placeholder="请输入评论内容" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCommentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addComment">确定</el-button>
      </span>
    </el-dialog>

    <!-- 评论历史对话框 -->
    <el-dialog title="评论历史" :visible.sync="commentHistoryVisible" width="50%" :close-on-click-modal="false">
      <div class="comment-history-container">
        <div v-for="(comment, index) in commentHistory" :key="index" class="comment-item">
          <div class="comment-header">
            <div class="user-info">
              <el-avatar :size="30" :src="comment.userId ? comment.userHeadPath : comment.directorHeadPath"></el-avatar>
              <span class="user-name">{{ comment.userId ? comment.userNickName : comment.directorName }}</span>
            </div>
            <span class="comment-time">{{ comment.creatTime }}</span>
          </div>
          <div class="comment-content">
            {{ comment.content }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      replyList: {},
      // 站点列表
      siteList: [],
      // 当前选中的回复
      currentReply: {},
      // 搜索表单
      searchForm: {
        content: '',
        siteId: '',
        startTime: '',
        endTime: ''
      },
      // 新回复表单
      newReply: {
        content: '',
        siteId: ''
      },
      // 新评论表单
      newComment: {
        commentId: '',
        content: '',
        parentId: '',
        siteId: ''
      },
      // 控制添加回复对话框的显示
      addReplyDialogVisible: false,
      // 控制确认对话框的显示
      confirmDialogVisible: false,
      // 控制添加评论对话框的显示
      addCommentDialogVisible: false,
      // 表单验证规则
      rules: {
        content: [
          { required: true, message: '请输入回复内容', trigger: 'blur' }
        ],
        siteId: [
          { required: true, message: '请选择站点', trigger: 'change' }
        ]
      },
      // 评论表单验证规则
      commentRules: {
        content: [
          { required: true, message: '请输入评论内容', trigger: 'blur' }
        ]
      },
      // 评论历史对话框显示控制
      commentHistoryVisible: false,
      // 评论历史数据
      commentHistory: [],
      // 当前选中的评论
      currentComment: {},
      // 多选框相关
      selectedReplies: [],
      // 当前用户信息
      currentUser: {
        userId: '',
        adminId: '',
        directorId: '',
        role: '',
        siteId: '',
        name: ''
      }
    };
  },
  methods: {
    // 获取站点名称
    getSiteName(siteId) {
      const site = this.siteList.find(item => item.id === siteId);
      return site ? site.siteName : '';
    },

    // 获取当前用户信息
    async getCurrentUserInfo() {
      try {
        const resp = await this.$http.get('/zsd-permission/admin-info/selAdminInfo', {
          headers: {
            token: localStorage.getItem('token')
          }
        });
        if (resp.data.code === null) {
          this.currentUser = {
            ...this.currentUser,
            role: resp.data.data.role,
            siteId: resp.data.data.siteId,
            name: resp.data.data.name
          };
          // 如果有站点ID，固定显示该站点
          if (this.currentUser.siteId) {
            this.searchForm.siteId = this.currentUser.siteId;
            // 禁用站点选择
            this.$nextTick(() => {
              const siteSelect = document.querySelector('.el-select');
              if (siteSelect) {
                siteSelect.classList.add('is-disabled');
              }
            });
          }
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },

    // 加载站点列表
    loadSites() {
      this.$http.get("/zsd-merchant/site/list", {
        params: {
          pageNum: 1,
          pageSize: 100,
          status: 1
        }
      })
      .then((resp) => {
        if (resp.data.code === 200) {
          // 过滤掉无效的站点数据
          this.siteList = resp.data.data.records.filter(site => site.siteName && site.siteName.trim() !== '');
          // 如果有固定的站点ID，只显示该站点
          if (this.currentUser.siteId) {
            this.siteList = this.siteList.filter(site => site.id === this.currentUser.siteId);
          }
        }
      });
    },

    // 加载回复列表
    loadReplies(pageNum = 1, pageSize = 3) {
      const params = {
        pageNum: pageNum,
        pageSize: pageSize,
        content: this.searchForm.content,
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime
      };
      
      // 如果有固定的站点ID，强制使用该站点ID
      if (this.currentUser.siteId) {
        params.siteId = this.currentUser.siteId;
      } else {
        params.siteId = this.searchForm.siteId;
      }

      this.$http.get("/zsd-merchant/reply/list", { params })
        .then((resp) => {
          if (resp.data.code === 200) {
            // 格式化回复列表中的时间
            const formattedRecords = resp.data.data.records.map(reply => {
              return {
                ...reply,
                creatTime: reply.creatTime ? reply.creatTime.replace('T', ' ') : ''
              };
            });
            resp.data.data.records = formattedRecords;
            this.replyList = resp.data.data;
          }
        });
    },

    // 搜索回复
    searchReplies() {
      this.loadReplies(1, this.replyList.size);
    },

    // 显示添加回复对话框
    showAddReplyDialog() {
      this.addReplyDialogVisible = true;
      // 清空新回复表单
      this.newReply = {
        content: '',
        siteId: ''
      };
      // 重置表单验证
      this.$refs.newReplyForm && this.$refs.newReplyForm.resetFields();
    },

    // 显示确认对话框
    showConfirmDialog() {
      this.$refs.newReplyForm.validate((valid) => {
        if (valid) {
          this.confirmDialogVisible = true;
        } else {
          this.$message.error('请检查输入信息');
          return false;
        }
      });
    },

    // 提交新回复
    addReply() {
      this.$http.post("/zsd-merchant/reply/publish", {
        content: this.newReply.content,
        siteId: this.newReply.siteId
      })
        .then((resp) => {
          if (resp.data.code === 200) {
            this.$message({
              message: '回复添加成功',
              type: 'success'
            });
            this.addReplyDialogVisible = false;
            this.confirmDialogVisible = false;
            // 重新加载回复列表
            this.loadReplies(1, this.replyList.size);
          } else {
            this.$message.error(resp.data.msg || '回复添加失败');
          }
        })
        .catch((error) => {
          console.error('回复添加失败:', error);
          this.$message.error('回复添加失败，请稍后再试');
        });
    },

    // 显示添加评论对话框
    showAddCommentDialog(row) {
      this.currentReply = row;
      // 如果是留言，使用当前回复的ID作为commentId
      this.newComment = {
        commentId: row.replyId, // 当前回复的ID作为commentId
        content: '',
        parentId: '', // 留言没有parentId
        siteId: row.siteId
      };
      this.addCommentDialogVisible = true;
    },

    // 添加评论
    addComment() {
      this.$refs.newCommentForm.validate((valid) => {
        if (valid) {
          // 如果是回复子评论，使用子评论的commentId作为commentId，子评论的ID作为parentId
          // 如果是回复父评论，使用父评论的commentId作为commentId，父评论的ID作为parentId
          let commentId, parentId;
          console.log(this.currentReply.replyId);
          console.log(this.currentReply.commentId);
          if (this.currentReply.commentId != null) {
            // 如果是回复子评论
            parentId = this.currentReply.replyId;
            commentId = this.currentReply.commentId;
          } else {
            // 如果是回复父评论
            commentId = this.currentReply.replyId;
            parentId = null;
          }

          this.$http.get("/zsd-merchant/reply/add/comment", {
            params: {
              commentId: commentId,
              content: this.newComment.content,
              parentId: parentId,
              siteId: this.newComment.siteId
            },
            headers: {
              token: localStorage.getItem('token')
            }
          })
            .then((resp) => {
              if (resp.data.code === 200) {
                this.$message({
                  message: '评论添加成功',
                  type: 'success'
                });
                this.addCommentDialogVisible = false;
                // 重新加载回复列表
                this.loadReplies(1, this.replyList.size);
              } else {
                this.$message.error(resp.data.msg || '评论添加失败');
              }
            })
            .catch((error) => {
              console.error('评论添加失败:', error);
              this.$message.error('评论添加失败，请稍后再试');
            });
        } else {
          this.$message.error('请检查输入信息');
          return false;
        }
      });
    },

    // 分页大小改变时触发
    handleSizeChange(pageSize) {
      this.loadReplies(1, pageSize);
    },

    // 当前页码改变时触发
    handleCurrentChange(pageNum) {
      this.loadReplies(pageNum, this.replyList.size);
    },

    // 判断是否是当前用户的评论
    isCurrentUserComment(comment) {
      // 超级管理员可以删除所有评论
      if (this.currentUser.role === 0) {
        return true;
      }
      // 其他角色需要判断评论的director_id是否与当前用户匹配
      return comment.director_id === this.currentUser.directorId;
    },

    // 显示评论历史
    showCommentHistory() {
      this.$http.get("/zsd-merchant/reply/list", {
        params: {
          siteId: this.currentReply.siteId,
          commentId: this.currentReply.replyId
        }
      })
      .then((resp) => {
        if (resp.data.code === 200) {
          // 处理评论数据，只保留需要的信息
          this.commentHistory = resp.data.data.records.map(comment => {
            return {
              ...comment,
              creatTime: comment.creatTime ? comment.creatTime.replace('T', ' ') : ''
            };
          });
          this.commentHistoryVisible = true;
        }
      });
    },

    // 删除评论
    deleteComment(comment) {
      this.$confirm('确认删除该评论吗？删除后将无法恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('/zsd-merchant/reply/delete/comment', {
          params: {
            id: comment.replyId
          },
          headers: {
            token: localStorage.getItem('token')
          }
        })
        .then((resp) => {
          if (resp.data.code === 200) {
            this.$message({
              message: '评论删除成功',
              type: 'success'
            });
            // 重新加载评论历史
            this.showCommentHistory();
          } else {
            this.$message.error(resp.data.msg || '评论删除失败');
          }
        })
        .catch((error) => {
          console.error('评论删除失败:', error);
          this.$message.error('评论删除失败，请稍后再试');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 回复评论
    replyToComment(comment) {
      // 确保comment是一个对象
      if (typeof comment !== 'object' || comment === null) {
        console.error('Invalid comment object:', comment);
        return;
      }

      // 设置当前评论
      this.currentComment = {
        ...comment,
        commentId: comment.commentId || null,
        replyId: comment.replyId || null
      };

      // 如果是回复子评论，使用子评论的commentId作为commentId，子评论的ID作为parentId
      // 如果是回复父评论，使用父评论的commentId作为commentId，父评论的ID作为parentId
      let commentId, parentId;
      console.log("这里");
      console.log("comment" + this.currentComment.commentId);
      if (this.currentComment.commentId != null) {
        // 如果是回复子评论
        parentId = this.currentComment.replyId;
        commentId = this.currentComment.commentId;
      } else {
        // 如果是回复父评论
        commentId = this.currentComment.replyId;
        parentId = null;
      }

      this.newComment = {
        commentId: commentId,
        content: '',
        parentId: parentId,
        siteId: this.currentReply.siteId
      };
      this.addCommentDialogVisible = true;
      this.commentHistoryVisible = false;
    },

    // 处理多选框变化
    handleSelectionChange(selection) {
      this.selectedReplies = selection;
    },

    // 批量删除
    batchDelete() {
      if (this.selectedReplies.length === 0) {
        this.$message.warning('请选择要删除的回复');
        return;
      }

      this.$confirm(`确认删除选中的 ${this.selectedReplies.length} 条回复吗？删除后将无法恢复`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedReplies.map(item => item.replyId);
        this.$http.delete('/zsd-merchant/reply/delete/comment', {
          params: {
            id: ids.join(',')
          },
          headers: {
            token: localStorage.getItem('token')
          }
        })
          .then((resp) => {
            if (resp.data.code === 200) {
              this.$message({
                message: '批量删除成功',
                type: 'success'
              });
              // 重新加载回复列表
              this.loadReplies(1, this.replyList.size);
              // 清空选中
              this.selectedReplies = [];
            } else {
              this.$message.error(resp.data.msg || '批量删除失败');
            }
          })
          .catch((error) => {
            console.error('批量删除失败:', error);
            this.$message.error('批量删除失败，请稍后再试');
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 删除回复
    deleteReply(reply) {
      this.$confirm('确认删除该回复吗？删除后将无法恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('/zsd-merchant/reply/delete/comment', {
          params: {
            id: reply.replyId
          },
          headers: {
            token: localStorage.getItem('token')
          }
        })
        .then((resp) => {
          if (resp.data.code === 200) {
            this.$message({
              message: '回复删除成功',
              type: 'success'
            });
            // 重新加载回复列表
            this.loadReplies(1, this.replyList.size);
          } else {
            this.$message.error(resp.data.msg || '回复删除失败');
          }
        })
        .catch((error) => {
          console.error('回复删除失败:', error);
          this.$message.error('回复删除失败，请稍后再试');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  async created() {
    // 初始化加载回复列表
    await this.getCurrentUserInfo();
    this.loadReplies();
    // 加载站点列表
    this.loadSites();
  }
};
</script>

<style scoped>
/* 搜索栏样式 */
.search-bar {
  border-bottom: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  background-color: #fff;
  margin-bottom: 20px;
}

/* 表格样式 */
.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  height: 48px;
  line-height: 48px;
}

.el-table__row {
  height: 48px;
  line-height: 48px;
}

.el-table .cell {
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 用户信息样式 */
.user-info, .director-info, .site-info {
  display: flex;
  align-items: center;
}

/* 分页样式 */
.pagination-container {
  margin-top: 20px;
  text-align: center;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 10px;
}

.el-dialog__header {
  background-color: #f5f7fa;
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.el-dialog__body {
  padding: 20px;
  color: #606266;
}

.confirm-content p {
  margin: 10px 0;
  font-size: 16px;
}

.confirm-content strong {
  color: #409EFF;
}

.el-dialog__footer {
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button--text {
  color: #409EFF;
}

.el-button--text:hover {
  color: #66b1ff;
}

/* 表单样式 */
.demo-form-inline .el-form-item {
  margin-bottom: 0;
}

.demo-form-inline .el-input, .demo-form-inline .el-date-picker {
  width: 200px;
}

/* 评论对话框样式 */
.comment-info {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

.comment-info .header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.comment-info .user-info {
  display: flex;
  align-items: center;
}

.comment-info .user-detail {
  margin-left: 15px;
  display: flex;
  flex-direction: column;
}

.comment-info .user-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.comment-info .reply-time {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.comment-info .site-info {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;
}

.comment-info .site-info i {
  margin-right: 8px;
  color: #409EFF;
}

.comment-info .reply-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
}

.comment-info .comment-history {
  text-align: right;
}

.comment-info .comment-history .el-button {
  padding: 0;
  font-size: 14px;
}

.comment-info .comment-history .el-button i {
  margin-right: 5px;
}

.el-divider {
  margin: 20px 0;
}

/* 评论历史样式 */
.comment-history-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 20px;
}

.comment-item {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f9fa;
  width: 100%;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comment-header .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-header .user-name {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
}

.comment-header .comment-time {
  font-size: 12px;
  color: #909399;
}

.comment-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin: 10px 0;
  word-break: break-all;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
}

/* 清除浮动 */
.comment-history-container::after {
  content: '';
  display: table;
  clear: both;
}
</style>